<template>
  <div class="dz-tabbar">
    <a href="javascript:void(0)" class="dz-tabbar-item is-active">
      <span class="dz-tabbar-item-icon iconfont">&#xe687;</span>
      <span class="dz-tabbar-item-text">首页</span>
    </a>
    <a href="javascript:void(0)" class="dz-tabbar-item">
      <span class="dz-tabbar-item-icon iconfont">&#xe61b;</span>
      <span class="dz-tabbar-item-text">微视频</span>
    </a>
    <a href="javascript:void(0)" class="dz-tabbar-item">
      <span class="dz-tabbar-item-icon iconfont">&#xe606;</span>
      <span class="dz-tabbar-item-text">朋友圈</span>
    </a>
    <a href="javascript:void(0)" class="dz-tabbar-item">
      <span class="dz-tabbar-item-icon iconfont">&#xe7c0;</span>
      <span class="dz-tabbar-item-text">购物车</span>
    </a>
    <a href="javascript:void(0)" class="dz-tabbar-item">
      <span class="dz-tabbar-item-icon iconfont">&#xe66c;</span>
      <span class="dz-tabbar-item-text">我的</span>
    </a>
  </div>
</template>

<script>
export default {};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.dz-tabbar {
  display: flex;
  flex-direction: row;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  overflow: hidden;
  height: 50px;
  background-color: #fff;
  border-top: 1px solid #e4e4e4;

  .dz-tabbar-item {
    flex: 1;
    text-align: center;
    color: #949494;
    .dz-tabbar-item-icon {
      display: block;
      padding: 2px;
    }
    .dz-tabbar-item-text {
      display: block;
      font-size: 10px;
    }
    &.is-active {
      .dz-tabbar-item-icon,
      .dz-tabbar-item-text {
        // color: #42bd56;
        color: #1682fb;
      }
    }
  }
}
</style>